<div class="login_box">
  <!--
    需要一个文本框

    el-row, 就是 element-ui 提供的一个无意义块级元素
      + 等价于我们书写的 div
  -->
  <el-row class="login">
    <div class="avatar">
      <img src="@/assets/001.png" alt="">
    </div>
    <!--
      已经把表单关联了 info 数据
    -->
    <el-form :model="info" :rules="loginRules" ref="login" label-width="100px" class="login-ruleForm">
      <el-form-item label="用户名" prop="username">
        <!-- 关联着 info 内的 username -->
        <el-input v-model="info.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <!-- 关联着 info 内的 password -->
        <el-input v-model="info.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitHandler">立即登录</el-button>
        <el-button @click="resetHandler">重置</el-button>
      </el-form-item>
    </el-form>
  </el-row>
</div>
